<template>
	<div class="app-home-vue frame-page">
		<Row :space="30">
			<Cell :xs='24' :sm='24' :md='24' :lg='16' :xl='16'>
				<div class="h-panel">
					<div class="h-panel-bar">
						<div class="h-panel-title">统计</div>
					</div>
				</div>
			</Cell>
			<Cell :xs='24' :sm='24' :md='24' :lg='8' :xl='8'>
				<div class="h-panel">
					<div class="h-panel-bar">
						<div class="h-panel-title">系统公告</div>
					</div>
					<div>
						<iframe frameborder="0" width="100%" height="300" src="https://www.huantu.cc/log.html"></iframe>
					</div>
				</div>
			</Cell>
			<Cell :xs='24' :sm='24' :md='24' :lg='16' :xl='16'>
				<div class="h-panel">
					<div class="h-panel-bar">
						<span class="h-panel-title">客户统计</span>
					</div>
					<div class="h-panel-body">
						<Chart :options="client"></Chart>
					</div>
				</div>
			</Cell>
		</Row>
	</div>
</template>

<script>
	import Chart from '@/components/chart'
	export default {
		components: {
			Chart
		},
		data() {
			return {
				loading : false,
				client: {}
			}
		},
		mounted() {
			this.$forceUpdate()
			this.getData()
		},
		methods: {
			async getData() {
				this.loading = true
				this.client = {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: [{
						type: 'category',
						name: '日',
						data: 1
					}],
					yAxis: [{
						name: '人',
						type: 'value'
					}],
					series: [
						{
							name: '客户增长',
							type: 'line',
							data: 1,
							smooth: true
						}
					]
				}
				this.loading = false
				this.$forceUpdate()
			}
		}
	};
</script>

<style lang='less'>
	.search-container{
		max-width: 500px;
		margin: 50px auto;
		height: 41px;
		display: flex;
		.flex1 input{
			height: 35px;
			line-height: 35px;
			font-size: 15px;
		}
		.h-autocomplete-show{
			border-color: #42b27f;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.h-autocomplete .h-autocomplete-show .h-icon-loading, .h-autocomplete .h-autocomplete-show > .h-icon-close{
			display: none;
		}
		.h-btn.h-btn-primary{
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
</style>
